window.onload=function(){
	let socket=io();
	const vw=new Vue({
	    el:"#groupChat",
		data:{
			list:[],
			input:'',
			switch1:true,
			switch2:false,
			name:'',
			headSrc:'',
			null:'',
		},
		methods:{
		
			sendNews:function(){
				
				if(this.input){
					let name=this.name;
					let date=new Date();
					let s={
						y:date.getFullYear(),
						my:date.getMonth()+1,//月份是从零开始的
						d:date.getDate(),
						h:date.getHours(),
						m:date.getMinutes(),
						s:date.getSeconds(),
					}
					let time=`${s.y}-${s.my}-${s.d}:${s.h}:${s.m}:${s.s}`;
					//socket不用$.ajax
					//还有自己的头像
					let data={
						time:time,
						val:this.input,
						name:this.name,
						headSrc:this.headSrc,
					}
					socket.emit('chat',data);
				}
				
			}
		},
		watch:{
		    input:{ //监听的对象
		        deep:true, //深度监听设置为 true
		        handler:function(newV,oldV){
					if(this.input){
						// this.switch1=false;
						this.switch2=true;
					}else{
						// this.switch1=true;
						this.switch2=false;
					}
		        }
	       }
	    }
	})
	getCookie();
	function getCookie(){
		// 不仅要获取名字.还要获取头像
		// 获取名字
		$.ajax({
			url:'http://localhost:9999/getName',
			method:'get',
			success:function(res){
				vw.headSrc=res[0].headSrc;
				let showname=$('.showname');
				vw.name=res[0].name;
				showname.text(res);
			}
			
		})
	}
	//将自己发送的消息，放置在右边
	function myRight(){
		let li=$('.li');
		let name=vw.name;
		for(var i=0;i<li.length;i++){
			let newsName=li.find('.showname').text();
			if(newsName==name){
				li.eq(i).addClass('my-right');
				console.log(li);
			}
		}
	}
	socket.on('send',(res)=>{
		console.log(res);
		vw.list.push(res);
		//限制消息数量 100条
		if(vw.list.length>=100){
			vw.list.shift();
		};
		$('.newsDiv').scrollTop(($('.li').height())*($('.li').length));
		vw.input='';
	})
	word();
	function word(){
		$.ajax({
			url:'http://localhost:9999/wordNews',
			method:'get',
			success:(res)=>{
				vw.list=res;
				setTimeout(()=>{
					$('.newsDiv').scrollTop(($('.li').height())*($('.li').length));
					vw.input='';
				},1);
				
			}
		})
	}
	
}

